<template>
  <div class="container">
    <div class="header-box">
      <div class="left-section">
        <div class="tags-title-row">
          <span class="tag tag-self">自营</span>
          <span class="tag tag-store">门店有售</span>
          <span class="product-title">{{ product.title }}</span>
        </div>
      </div>
      <div
        class="collect"
        :class="{ collected: isCollected }"
        @click="toggleCollect"
      >
        <i>★</i>
        {{ isCollected ? '已收藏' : '收藏' }}
      </div>
    </div>

    <!--    <div class="hot-sale">{{ product.hotSale }}</div>-->

    <div class="price-section">
      <div class="price-container">
        <div class="price">￥{{ product.price }}</div>
        <div class="rating">
          <span>累计评价 {{ product.reviewCount }}+</span>
          <span class="price-drop-notice" @click="handlePriceDropNotice">
            降价通知
          </span>
        </div>
      </div>
      <div class="promotion">
        <ul>
          <li v-for="(promo, index) in product.promotions" :key="index">
            {{ promo }}
          </li>
        </ul>
      </div>
    </div>

    <div class="delivery">
      <div class="delivery-box">
        <div class="delivery-title left-label">送至</div>
        <div class="delivery-address">{{ delivery.address }}</div>
        <!--  <div>{{ delivery.status }}</div>-->
        <div>{{ delivery.logistics }}</div>
      </div>
    </div>

    <div class="option-group">
      <div class="option-title left-label">外观</div>
      <div class="options">
        <div
          v-for="color in product.colors"
          :key="color"
          class="option"
          :class="{ selected: selectedColor === color }"
          @click="selectedColor = color"
        >
          {{ color }}
        </div>
      </div>
    </div>

    <div class="option-group">
      <div class="option-title left-label">版本</div>
      <div class="options">
        <div
          v-for="version in product.versions"
          :key="version"
          class="option"
          :class="{ selected: selectedVersion === version }"
          @click="selectedVersion = version"
        >
          {{ version }}
        </div>
      </div>
    </div>

    <div class="service">
      <div class="service-title left-label">服务</div>
      <div class="service-items">
        <div
          v-for="service in product.services"
          :key="service"
          class="service-item"
          :class="{ selected: selectedServices.includes(service) }"
          @click="toggleService(service)"
        >
          {{ service }}
        </div>
      </div>
    </div>

    <div class="service">
      <div class="service-title left-label">京选服务</div>
      <div class="service-items">
        <div
          v-for="premiumService in product.premiumServices"
          :key="premiumService.name"
          class="service-item"
          :class="{ selected: selectedPremiumService === premiumService.name }"
          @click="selectPremiumService(premiumService.name)"
        >
          {{ premiumService.name }} {{ premiumService.price }}
        </div>
      </div>
    </div>

    <div class="installment">
      <div class="installment-title left-label">白条分期</div>
      <div class="installment-options">
        <div
          v-for="installment in product.installments"
          :key="installment.name"
          class="installment-option"
          :class="{ selected: selectedInstallment === installment.name }"
          @click="selectedInstallment = installment.name"
        >
          {{ installment.display }}
        </div>
      </div>
    </div>

    <div class="quantity">
      <div class="quantity-control">
        <div class="quantity-btn" @click="decreaseQuantity">-</div>
        <input
          type="text"
          class="quantity-input"
          v-model.number="quantity"
          @change="validateQuantity"
        />
        <div class="quantity-btn" @click="increaseQuantity">+</div>
      </div>
      <div class="btn add-to-cart" @click="addToCart">加入购物车</div>
      <div class="btn buy-now" @click="buyNow">立即购买</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

interface Product {
  title: string
  price: number
  hotSale: string
  reviewCount: number
  colors: string[]
  versions: string[]
  services: string[]
  premiumServices: { name: string; price: string }[]
  installments: { name: string; display: string }[]
  promotions: string[]
}

interface DeliveryInfo {
  address: string
  status: string
  logistics: string
}

const isCollected = ref(false)
const selectedColor = ref('薰衣草紫色')
const selectedVersion = ref('256GB')
const selectedServices = ref<string[]>(['7天价保'])
const selectedPremiumService = ref('1年AppleCare+ ¥649.00')
const selectedInstallment = ref('不分期')
const quantity = ref(1)

const product = reactive<Product>({
  title:
    'Apple/苹果 iPhone 17 256GB 薰衣草紫色 支持移动联通电信5G 双卡双待手机',
  price: 5999.0,
  hotSale: '手机热卖榜-第2名',
  reviewCount: 2000,
  colors: ['薰衣草紫色', '鼠尾草绿色', '青葱蓝色', '白色', '黑色'],
  versions: ['256GB', '512GB'],
  services: ['7天价保', '免费上门退换', '免签证退换货', '一年质保', '高价回收'],
  premiumServices: [
    { name: '1年AppleCare+', price: '¥649.00' },
    { name: '2年AppleCare+', price: '¥1199.00' },
  ],
  installments: [
    { name: '不分期', display: '不分期' },
    { name: '3期', display: '¥1999.68 x 3期 0服务费' },
    { name: '6期', display: '¥999.85 x 6期 0服务费' },
    // {name: '12期', display: '¥499.99 x 12期 0服务费'},
    // {name: '24期', display: '¥316.14 x 24期 含服务费：¥65.99/期'}
  ],
  promotions: ['PLUS专享立减', '满额返券', '最高返299家豆'],
})

const delivery = reactive<DeliveryInfo>({
  address: '广东深圳市宝安区福永街道',
  status: '采购中，预计2025-11-15日后有货',
  logistics: '京东物流 部分收货·送货上门',
})

const toggleCollect = () => {
  isCollected.value = !isCollected.value
}

const toggleService = (service: string) => {
  const index = selectedServices.value.indexOf(service)
  if (index > -1) {
    selectedServices.value.splice(index, 1)
  } else {
    selectedServices.value.push(service)
  }
}

const selectPremiumService = (serviceName: string) => {
  selectedPremiumService.value = serviceName
}

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

const increaseQuantity = () => {
  quantity.value++
}

const validateQuantity = () => {
  if (isNaN(quantity.value) || quantity.value < 1) {
    quantity.value = 1
  }
}

const addToCart = () => {
  console.log('加入购物车', {
    color: selectedColor.value,
    version: selectedVersion.value,
    quantity: quantity.value,
    services: selectedServices.value,
    premiumService: selectedPremiumService.value,
    installment: selectedInstallment.value,
  })
}

const buyNow = () => {
  console.log('立即购买', {
    color: selectedColor.value,
    version: selectedVersion.value,
    quantity: quantity.value,
    services: selectedServices.value,
    premiumService: selectedPremiumService.value,
    installment: selectedInstallment.value,
  })
}

const handlePriceDropNotice = () => {
  console.log('设置降价通知')
}
</script>

<style lang="scss" scoped>
.container {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0.8rem;
  background-color: #fff;
  font-size: 0.75rem;
}

.header-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.625rem 0;
  border-bottom: 0.0625rem solid #eee;
  margin-bottom: 0.9375rem;
}

.left-section {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tag {
  padding: 0.35rem 0.3rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  color: #ffffff;
  line-height: 0.75rem;
}

.tag-self {
  background-color: #e4393c;
}

.tag-store {
  background-color: #4a7dff;
  margin: 0 0.3rem;
}

.product-title {
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.5rem;
  margin: 0;
}

.collect {
  width: 5rem;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.3125rem 0.625rem;
  border: 0.0625rem solid #ddd;
  border-radius: 0.25rem;
  transition: all 0.2s;

  &:hover {
    color: #e4393c;
    border-color: #e4393c;
  }

  &.collected {
    color: #e4393c;
    border-color: #e4393c;
  }

  i {
    margin-right: 0.3125rem;
  }
}

.hot-sale {
  display: inline-block;
  background-color: #e4393c;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  margin-bottom: 0.625rem;
}

.price-section {
  border-radius: 0.25rem;
  margin: 0.9375rem 0;
}

.price-container {
  display: flex;
  justify-content: space-between;
}

.price {
  color: #e4393c;
  font-size: 1.75rem;
  font-weight: bold;
}

.promotion {
  font-size: 0.875rem;
  color: #e4393c;

  ul {
    display: flex;
    gap: 0.625rem;

    li {
      background-color: #fef2f2;
      font-weight: bold;
      font-size: 0.75rem;
      padding: 0.15rem 0.35rem;
    }
  }
}

.rating {
  display: flex;
  align-items: center;
  margin: 0.9375rem 0;
  font-size: 0.875rem;
  color: #666;

  span {
    margin-right: 0.9375rem;
  }
}

.price-drop-notice {
  color: #e4393c;
  cursor: pointer;
}

.delivery {
  //padding: 0.625rem 0;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.delivery-box {
  display: flex;
  align-items: baseline;
}

.left-label {
  flex: 0 0 auto;
  min-width: 3.5rem;
  color: #888b94;
  font-weight: bold;
}

.delivery-address {
  color: #e4393c;
  margin-right: 0.9375rem;
}

.option-group {
  display: flex;
  align-items: baseline;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.option {
  padding: 0.25rem 0.625rem;
  border: 0.0625rem solid #ddd;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: #e4393c;
  }

  &.selected {
    border-color: #e4393c;
    color: #e4393c;
    background-color: #fff0f0;
  }
}

.service {
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
}

.service-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.service-item {
  padding: 0.25rem 0.625rem;
  background-color: #f5f5f5;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background-color: #e8e8e8;
  }

  &.selected {
    background-color: #fff0f0;
    color: #e4393c;
    box-shadow: 0 0 0 0.0625rem #e4393c;
  }
}

.installment {
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
}

.installment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.installment-option {
  padding: 0.25rem 0.625rem;
  border: 0.0625rem solid #ddd;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: #e4393c;
  }

  &.selected {
    border-color: #e4393c;
    color: #e4393c;
    background-color: #fff0f0;
  }
}

.quantity {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 1.875rem;
  height: 1.875rem;
  border: 0.0625rem solid #ddd;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  font-weight: bold;

  &:hover {
    background-color: #e8e8e8;
  }
}

.quantity-input {
  width: 3.125rem;
  height: 1.875rem;
  border: 0.0625rem solid #ddd;
  text-align: center;
  margin: 0 0.3125rem;
}

.btn {
  padding: 0.5rem 0;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  flex: 1;
  transition: all 0.2s;
}

.add-to-cart {
  background-color: #ffeded;
  border: 0.0625rem solid #e4393c;
  color: #e4393c;

  &:hover {
    background-color: #ffdbdb;
  }
}

.buy-now {
  background-color: #e4393c;
  border: 0.0625rem solid #e4393c;
  color: white;

  &:hover {
    background-color: #c03434;
  }
}
</style>
